<template>
  <keep-alive>
    <el-dialog
      :title="isForRegisterDetail? '登记详情': '过闸详情'"
      :visible="visible"
      class="ship-register-detail-dlg"
      :before-close="handleClosedlg"
    >
      <div class="dlg-content-wraper" style="padding: 0px 10px">
        <el-form
          class="my-el-form"
          ref="ruleFormRef"
          :model="formData"
          label-width="0px"
        >
          <div class="cat-title">登记信息</div>
          <table class="detail-table" :style="{'--my-width1': '50%', '--my-width2': '50%'}">
            <colgroup>
              <col style="width: 33.33%; background-color:#f7f7f7;">
              <col style="width: 33.33%; background-color:#f7f7f7;">
              <col style="width: 33.33%; background-color:#f7f7f7;">
            </colgroup>
            <thead>
            </thead>
            <tbody>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">登记号</span>
                  <span class="span-value">
                    {{ formData.djh }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">船名船号</span>
                  <span class="span-value">{{ formData.cmch }}</span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">状态</span>
                  <div class="span-value">
                    <!--过闸-->
                    {{ formData.djzt | returnDzjt }}
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">所属队列</span>
                  <div class="span-value">
                    {{ formData.ssdl }}
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">货物种类</span>
                  <div class="span-value">
                    {{ formData.hwzl }}
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">是否危险品</span>
                  <div class="span-value">
                    {{ formData.wxp == 1 ? '是' : '否' }}
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <!-- 2023-8-8  字段不变, 名称根据是否船队而变-->
                  <span v-if="formData.sfcd == 1" class="span-label">最大吃水(米)</span>
                  <span v-else class="span-label">船舶吃水(米)</span>
                  <div class="span-value">
                    {{ formData.cbcs }}
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">起点</span>
                  <div class="span-value">
                    {{ formData.yjqd }}
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">讫点</span>
                  <div class="span-value">
                    {{ formData.yjzd }}
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">实际载重吨(吨)</span>
                  <span class="span-value">
                    {{ formData.sjzzd }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">集装箱数量</span>
                  <span class="span-value zjhm-width">
                    {{ formData.jzxsl }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">随船电话</span>
                  <div class="span-value">
                    {{ formData.scdh }}
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">过闸减免依据</span>
                  <span class="span-value">
                    {{ returnGzjmyjLabel }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">是否优先过闸</span>
                  <span class="span-value">
                    {{ formData.yxgz == 1 ? '已申请' : '未申请' }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">优先过闸理由</span>
                  <span class="span-value">
                   {{ formData.tfly }}
                 </span>
                </div>
              </td>
            </tr>
            <!--
            是否到达 颜色 ,报道方式 有关系.
            -->
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">是否到达</span>
<!--                  2023-8-16  是否到达, 报道方式 报道时间 都按照真实的数据来吧-->
                  <span class="span-value">
<!--                    取是否报到 sfbd -->
                    <span
                      :style="{color: formData.sfbd ==1? 'green' :'red'}">{{
                        formData.sfbd == 1 ? '已到达' : '未到达'
                      }}</span>
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">报到方式</span>
                  <span class="span-value">
                    <!-- 2023-5-16 按 bdfs 取, 0 AIS, 1 VITS -->
                     <span v-if="formData.bdfs == 0" style="padding: 0px 4px;">AIS</span>
                     <span v-else-if="formData.bdfs == 1" style="padding: 0px 4px;">VITS</span>
                     <span v-else style="padding: 0px 4px;"></span>
                 </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">报到时间</span>
                  <!--                  暂时无 bdsj -->
<!--             就取登记时间 2023-8-16 ?? 说又不是    -->
                  <span class="span-value">{{formData.bdsj}}</span>
                </div>
              </td>
            </tr>

            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">登记船闸所</span>
                  <span class="span-value">
                    {{ formData.djczs }}
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">轨迹查询</span>
                  <span class="span-value">{{ formData.sfgjhc == 1 ? '已核查' : '未核查' }}</span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label"></span>
                  <span class="span-value"></span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <div class="td-item-wrap-pics-area">
                  <span class="span-label w167">上传资料</span>
                  <div class="pics-upload-area w833">
                    <!--  false 2023-8-8  隐藏,,, 这个图片应该显示登记的 不是船舶的, 先隐藏  -->
                    <div class="pics-area" v-if="false">
                      <div class="img-item" v-if="formData.cjzsfjid instanceof Array && formData.cjzsfjid.length ==1">
                        <div class="img-wrap">
                          <el-image
                            :src="formData.cjzsfjid[0]"
                            :initial-index="0"
                            fit="fill"
                          >
                            <div slot="placeholder" class="imageslot">
                              <i class="el-icon-loading" style="font-size: 30px; color: #909399"></i>
                            </div>

                          </el-image>
                          <div class="img-mask">
                            <i class="el-icon-zoom-in" style="cursor:pointer; "
                               @click="handlePictureCardPreview({url: formData.cjzsfjid[0]})"></i>
                          </div>
                        </div>
                        <div class="img-text">船检证书</div>
                      </div>
                      <div class="img-item" v-if="formData.cbzmfjid instanceof Array && formData.cbzmfjid.length ==1">
                        <div class="img-wrap">
                          <el-image
                            :src="formData.cbzmfjid[0]"
                            :initial-index="0"
                            fit="fill"
                          >
                            <div slot="placeholder" class="imageslot">
                              <i class="el-icon-loading" style="font-size: 30px; color: #909399"></i>
                            </div>

                          </el-image>
                          <div class="img-mask">
                            <i class="el-icon-zoom-in" style="cursor:pointer; "
                               @click="handlePictureCardPreview({url: formData.cbzmfjid[0]})"></i>
                          </div>
                        </div>
                        <div class="img-text">船舶正面照</div>

                      </div>
                      <div class="img-item" v-if="formData.cbcmfjid instanceof Array && formData.cbcmfjid.length ==1">
                        <div class="img-wrap">
                          <el-image
                            :src="formData.cbcmfjid[0]"
                            :initial-index="0"
                            fit="fill"
                          >
                            <div slot="placeholder" class="imageslot">
                              <i class="el-icon-loading" style="font-size: 30px; color: #909399"></i>
                            </div>

                          </el-image>
                          <div class="img-mask">
                            <i class="el-icon-zoom-in" style="cursor:pointer;"
                               @click="handlePictureCardPreview({url: formData.cbcmfjid[0]})"></i>
                          </div>
                        </div>
                        <div class="img-text">船舶侧面照</div>

                      </div>
                      <template v-if="formData.qtfjid instanceof Array && formData.qtfjid.length>0 ">
                        <div class="img-item" v-for="(url,index) in formData.qtfjid" :key="index">
                          <div class="img-wrap" v-if="url">
                            <el-image
                              :src="url"
                              fit="fill"
                            >
                              <div slot="placeholder" class="imageslot">
                                <i class="el-icon-loading" style="font-size: 30px; color: #909399"></i>
                              </div>

                            </el-image>
                            <div class="img-mask">
                              <i class="el-icon-zoom-in" style="cursor: pointer"
                                 @click="handlePictureCardPreview({url})"></i>
                            </div>
                          </div>
                          <div class="img-text">其他附件图{{ index + 1 }}</div>
                        </div>
                      </template>
                    </div>
                    <!--  2023-8-8  先暂时显示为空 -->
                    <div class="pics-area" style="height: 26px;padding-left: 0px;" v-else></div>
                    <!--   img preview mask -->
                    <div class="img-preview-my-mask" v-if="maskVisibleForPreviewImg"
                         @click="maskVisibleForPreviewImg=false;">
                      <div class="img-preview-wrap">
                        <h3 class="preview-title">
                          <span>图片预览</span>
                          <i style="cursor: pointer"
                             @click="maskVisibleForPreviewImg=false;"
                             class="el-icon-close">
                          </i>
                        </h3>
                        <div class="img-preview-div">
                          <img class="img-preview" :src="previewImgUrl" alt="">
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </td>
            </tr>
            </tbody>
          </table>

          <!--        for 单船  -->
          <template v-if="formData.sfcd == 0">
            <div class="cat-title">船舶信息</div>
            <table class="detail-table" :style="{'--my-width1': '50%', '--my-width2': '50%'}">
              <colgroup>
                <col style="width: 33.33%; background-color:#f7f7f7;">
                <col style="width: 33.33%; background-color:#f7f7f7;">
                <col style="width: 33.33%; background-color:#f7f7f7;">
              </colgroup>
              <thead>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">船名船号</span>
                    <!--                  {{formData.cmch}}-->
                    <span class="span-value">{{ formData.cmch }}</span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">总吨(吨)</span>
                    <span class="span-value">{{ formData.zd }}</span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">计费基数</span>
                    <div class="span-value">
                      {{ formData.jfjs }}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">船舶长度(米)</span>
                    <div class="span-value">
                      {{ formData.cbcd }}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">船舶宽度(米)</span>
                    <div class="span-value">
                      {{ formData.cbkd }}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">船舶型深</span>
                    <div class="span-value">
                      {{ formData.cbxs }}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">最大船长(米)</span>
                    <div class="span-value">
                      {{ formData.zdcc }}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">最大船宽(米)</span>
                    <div class="span-value">
                      {{ formData.zdck }}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">最大型深(米)</span>
                    <div class="span-value">
                      {{ formData.zdxs }}
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">船舶高度(米)</span>
                    <span class="span-value">
                        {{ formData.cbgd }}
                    </span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label">准载吨位(吨)</span>
                    <span class="span-value zjhm-width">
                        {{ formData.zzd }}
                      </span>
                  </div>
                </td>
                <!--
                2023-5-24 对照原型图v7 取消zjgl
                 <span class="span-label">主机功率(千瓦)</span>
                                  <div class="span-value">
                                    {{ formData.zjgl }}
                                  </div>
                 -->
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label"></span>
                    <div class="span-value">
                    </div>
                  </div>
                </td>

              </tr>
              </tbody>
            </table>
          </template>
          <!--        for 船队   slice(1) 去掉第一个 显示的是除 登记头船 以外的 其他船舶 -->
          <!--          djcblx 1顶推 2备用 3驳船    单船的 0货轮-->
          <template v-else>
            <div class="cat-title">备用轮头</div>
            <table class="ship-list-table">
              <colgroup>
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
                <col style="width: 14.28%;">
              </colgroup>
              <thead>
              <tr>
                <th>序号</th>
                <th>船名船号</th>
                <th>船长</th>
                <th>船宽</th>
                <th>型深</th>
                <th>总吨</th>
                <th>计费基数</th>
              </tr>
              </thead>
              <tbody>
              <template
                v-if="formData.registerShipList && formData.registerShipList.length > 1 && formData.registerShipList.slice(1).filter((item)=>item.djcblx ==2).length>0"
              >
                <tr v-for="(item,index) in formData.registerShipList.slice(1).filter((item)=>item.djcblx ==2)"
                    :key="item.cbid">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.cmch }}</td>
                  <td>{{ item.cbcd }}</td>
                  <td>{{ item.cbkd }}</td>
                  <td>{{ item.cbxs }}</td>
                  <td>{{ item.zd }}</td>
                  <td>{{ item.jfjs }}</td>
                </tr>
              </template>
              <tr v-else>
                <td colspan="7" style="color: gray">暂无数据</td>
              </tr>
              </tbody>
            </table>
            <div class="cat-title">驳船信息</div>
            <table class="ship-list-table">
              <colgroup>
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
              </colgroup>
              <thead>
              <tr>
                <th>序号</th>
                <th>船名船号</th>
                <th>船长</th>
                <th>船宽</th>
                <th>型深</th>
                <th>是否标准化船型</th>
                <th>总吨</th>
                <th>计费基数</th>
                <th>超长宽级别</th>
                <th>准载吨位</th>
              </tr>
              </thead>
              <tbody>
              <template
                v-if="formData.registerShipList && formData.registerShipList.length > 1 && formData.registerShipList.slice(1).filter((item)=>item.djcblx ==3).length >0"
              >
                <tr v-for="(item,index) in formData.registerShipList.slice(1).filter((item)=>item.djcblx ==3)"
                    :key="item.cbid">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.cmch }}</td>
                  <td>{{ item.cbcd }}</td>
                  <td>{{ item.cbkd }}</td>
                  <td>{{ item.cbxs }}</td>
                  <td>{{ item.sfbzhcx == 1 ? '√' : '' }}</td>
                  <td>{{ item.zd }}</td>
                  <td>{{ item.jfjs }}</td>
                  <td>{{ item.cckjb }}</td>
                  <td>{{ item.zzd }}</td>
                </tr>
              </template>
              <tr v-else>
                <td colspan="10" style="color: gray">暂无数据</td>
              </tr>
              </tbody>
            </table>
          </template>
          <!--缴费信息 不抱起来会报错-->
          <template v-if="formData.paymentInfo">
            <div class="cat-title">缴费信息</div>
            <table class="payment-info-tb">
              <colgroup>
                <col style="width: 33.3%; ">
                <col style="width: 33.3%; ">
                <col style="width: 33.3%; ">
              </colgroup>
              <thead>
              <tr>
                <th>缴费类型</th>
                <th>缴费金额</th>
                <th>缴费时间</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in formData.paymentInfo.billDetailItemList" :key="index">
                <td>
                  <div>
                    <span>{{ item.jflxmc }}</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span>{{ item.sfje }}</span>
                  </div>
                </td>
                <td>
                  <div>
                  <span>{{parseTime(item.jfsj)}}</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>
                    <span>总计</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span>{{ formData.paymentInfo.hjje }}</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span></span>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </template>
          <div class="cat-title">当前航次信息</div>
          <table class="current-navi-order-info">
            <thead>
            <tr>
              <th>登记号</th>
              <th>船名船号</th>
              <th>是否船队</th>
              <th>船闸名称</th>
              <!--              <th>起点</th>-->
              <!--              <th>讫点</th>-->
              <th>登记人</th>
              <th>登记时间</th>
              <th>缴费人</th>
              <th>缴费时间</th>
              <th>调度人</th>
              <th>调度时间</th>
              <th>过闸确认人</th>
              <th>过闸确认时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                <div>
                  <span>{{ formData.djh }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.cmch }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.sfcd == 1 ? '是' : '否' }}</span>
                </div>
              </td>
              <!--           没有中文字段 用cszId吧,2023-7-31   -->
              <td>
                <div>
                  <span>{{ returnCzxMC }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.djr }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.djsj }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.jfr }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.jfsj }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.ddr }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.ddsj }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.gzqrr }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ formData.gzqrsj }}</span>
                </div>
              </td>
            </tr>

            </tbody>
          </table>

          <!--          <div class="cat-title">历史航次信息(zyz:最近5或10条, 不分页)</div>-->
          <!--          历史航次信息不需要显示了 2023-5-6-->
          <template v-if="false">
            <div class="cat-title">历史航次信息</div>
            <table class="table-history-info">
              <colgroup>
                <col style="width: 15%;">
                <col style="width: 15%;">
                <col style="width: 15%;">
                <col style="width: 40%;">
                <col style="width: 15%;">
              </colgroup>
              <thead>
              <tr>
                <th>起点</th>
                <th>讫点</th>
                <th>航向</th>
                <th>经过船闸</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div>
                    <span>常州</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span>南京</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span>上行</span>
                  </div>
                </td>
                <td>
                  <div>
                    <span>前黄</span>
                  </div>
                </td>
                <td>
                  <div>
                    <a style="text-decoration: underline;color: #179ffa">查看详细</a>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </template>

        </el-form>
      </div>

      <span slot="footer" class="dlg-footer">
        <el-button
                   @click="closeDlg" class="myDefaultBtn smallBtnPadding" type="primary">关闭</el-button>

      </span>

    </el-dialog>

  </keep-alive>
</template>

<script>
import {mapGetters} from "vuex";
import {getUrlByFileId} from "@/api/dispatch/shipInfoManagement/shipInfoCheck";
import {listByTemplateId, treeByTemplate} from '@/api/sys/dict/data'
import dictionary from "@/utils/dictionary";
import {parseTime} from "@/utils/ruoyi";
import {getRegisterCb} from "@/api/dispatch/shipDelayedLockage/shipDelayedLockage";
import {getAnyShipInfoByCmch} from "@/api/shipRegistrationManagement/singleShip/singleShip";
import {getPayDetail} from "@/api/dispatch/paymentInfoQuery/paymentInfoQuery";
import {allCzsSelect} from "@/api/dispatch/lockPersonalitySetting/lockPersonalitySetting";
// 新传入一个djid  djh ,djid 必传

/**
 *  返回结构改了,
 *  包含 shiplist:[]// 第一个代表 单船, 或 船队的 主拖头,,,
 *  ,后天的如果有, 就代表备拖, 及驳船,
 *
 */
// 根据是否船队 sfcd 判断 来显示不同的结构

/**
 *
 * <!--  必须v-if-->
 <ship-register-detail-info
 v-if="dialogVisibleForRegisiterDetail"
 :visible.sync="dialogVisibleForRegisiterDetail"
 :register-query-info="registerQueryInfo"
 >

 registerQueryInfo:{
  cbid, cmch, djh, djid //必须传入4个参数
 }

 *
 * */



export default {
  name: "shipRegisterDetailInfo",
  components: {},
  props: {
    // 默认不传 则标题显示登记详情 否则显示过闸详情
    isForRegisterDetail: {
      type: Boolean,
      default: true
    },
    registerQueryInfo: {
      required: true,
      type: Object,
      default: function () {
        return {
          djid: '',
          cmch: '',
          cbid: '', //加上 cbid,防止 cmch重名
          djh: '',
        }
      }
    },
    visible: {
      type: Boolean,
      default: true
    },

  },
  data() {
    return {
      // 2023-7-31 add
      allCzsOptions: [],

      //shipList 应从登记详情里获取, //从第二条开始显示
      shipListTest: [
        // {
        //   id: 1,
        //   cmch: '鲁济宁货拖0001',
        //   cblx: '拖轮',
        //   cbcd: '44.98',
        //   cbkd: '8.9',
        //   cbxs: '4.8',
        //   zd: '550',
        //   jfjs: '660',
        //   zzd: '600',
        // }
      ],
      formData: {},
      ctclOptions: [],
      cblxOptions: [],
      cjgOptions: [],
      fzjgOptions: [],
      zcdOptions: [],
      //过闸减免依据选项
      freeReasonOptions: [],
      maskVisibleForPreviewImg: false,
      previewImgUrl: null,
    }
  },

  computed: {
    //token 可以直接拿来用
    // ...mapGetters(['token']),

    returnGzjmyjLabel() {
      if (!this.formData.gzjmyj) return ''
      if (!this.freeReasonOptions) return ''
      for (const reason of this.freeReasonOptions) {
        if (reason.value == this.formData.gzjmyj) {
          return reason.label
        }
      }
      return '';
    },

    returnCzxMC() {
      if (!this.formData.czsId) return ''
      if (!this.allCzsOptions) return ''
      for (const czsItem of this.allCzsOptions) {
        if (czsItem.jgid == this.formData.czsId) {
          return czsItem.jgjc
        }
      }
      return '';
    }

  },
  filters: {
    returnDate(t) {
      let now = new Date(t)
      let y = now.getFullYear()
      let m = now.getMonth() + 1
      let d = now.getDate()
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
    },

    //<!--"djzt": null, // 登记状态（0登记/1已调/2退费/3延时/4延时恢复/5过号/6过号恢复/7确认过闸/8销号-->
    returnDzjt: function (value) {
      // if (!value) return ''
      if (value == '0') return '登记';
      else if (value == '1') return '已调';
      else if (value == '2') return '退费';
      else if (value == '3') return '延时';
      else if (value == '4') return '延时恢复';
      else if (value == '5') return '过号';
      else if (value == '6') return '过号恢复';
      else if (value == '7') return '确认过闸';
      else if (value == '8') return '销号';
      else if (value == '9') return '缴费';
      else {
        return ''
      }
    }
  },
  mounted() {
    this.getCtclOptions();
    this.getCblxOptions();
    this.getCjgList();
    // this.getAllUrlsFromFjid();
    this.getFreeReasonOptions();
    this.toGetRegisterDetail();
    this.getAllCzsInfo()
  },

  methods: {

    async getAllCzsInfo() {
      const res = await allCzsSelect({})
      if (res.code == 200 && res.data) {
        console.log(res.data, '获得的船闸所信息all')
        this.allCzsOptions = res.data;
      }
    },

    //登记详情
    async toGetRegisterDetail() {
      if (!this.registerQueryInfo) return;
      let ret = await getRegisterCb({
        djid: this.registerQueryInfo.djid,
        cmch: this.registerQueryInfo.cmch,
        djh: this.registerQueryInfo.djh,
        sfgz: '' //必选 '', 2023-5-22
      })
      if (ret && ret.code == 200 && ret.data) {
        console.log(ret.data, '获得的登记详情---------->')
        this.formData = {...ret.data}
      } else {
        this.$message.error('获得船舶登记详情异常')
        return;
      }

      let params = {
        // cmch: this.registerQueryInfo.cmch // 船名船号
        cbid: this.registerQueryInfo.cbid //
      }
      await getAnyShipInfoByCmch(params).then(async ({data}) => {
        if (data && data.length != 0) {
          console.warn(data, '获得的船舶详情---------->')
          this.formData = {...this.formData, ...JSON.parse(JSON.stringify(data))};
          let cjg = this.getLastString(this.formData.cjgid)
          let fzjg = this.getLastString(this.formData.fzjg)
          let zcd = this.getLastString(this.formData.zcd)
          this.formData.qtfjid = await this.getImgUrlById(this.formData.qtfjid)
          this.formData.cbzmfjid = await this.getImgUrlById(this.formData.cbzmfjid)
          this.formData.cbcmfjid = await this.getImgUrlById(this.formData.cbcmfjid)
          this.formData.cjzsfjid = await this.getImgUrlById(this.formData.cjzsfjid)
          this.formData.cjg = cjg
          this.formData.zcd = zcd
          this.formData.fzjg = fzjg
          //少 app使用状态,

          let res = await getPayDetail({djid: this.registerQueryInfo.djid})
          if (res && res.code == 200 && res.data) {
            this.formData = {...this.formData, 'paymentInfo': res.data}
          }
        }
      })
    },
    // 获取逗号分割的字符串的最后一级,并且转成中文
    getLastString(str) {
      let arr = (str || '').split(',')
      let value = ''
      if (arr) {
        value = arr[arr.length - 1]
      }
      return value
    },

    // 根据附件id获取url
    async getImgUrlById(fjids) {
      let urlArr = []
      if (!fjids) return
      await getUrlByFileId(fjids).then(res => {
        urlArr = res.data
      })
      return urlArr
    },

    async getFreeReasonOptions() {
      //
      this.freeReasonOptions = await this.initDictOptionsUtil('brakeReliefBasis')
    },
    //过滤器 取不到this.
    returnCtclLabel(ctcllxid) {
      /*
      * [
      *   {label, dataId},
      *   {label, dataId},
      * ]
      */
      console.error(this.ctclOptions)
      //dictDataId
      let f = this.ctclOptions.filter(value => {
        return value.value == ctcllxid
      })
      console.error(f)
      if (f && f.length > 0) {
        return f[0].label
      }
      return ctcllxid
    },
    returnCblxLabel(cblxid) {
      /*
      * [
      *   {label, dataId},
      *   {label, dataId},
      * ]
      */
      console.error(this.cblxOptions)
      //dictDataId
      let f = this.cblxOptions.filter(value => {
        return value.value == cblxid
      })
      if (f && f.length > 0) {
        return f[0].label
      }
      return cblxid
    },

    //2023-6-7 不用了
    async getAllUrlsFromFjid() {
      if (true) return;
      let vm = this;
      if (vm.formData.cjzsfjid) {
        let url = await vm.getUrl(vm.formData.cjzsfjid)
        vm.formData.cjzsfjurl = url;
      }
      if (vm.formData.cbzmfjid) {
        let url = await vm.getUrl(vm.formData.cbzmfjid)
        vm.formData.cbzmfjurl = url;
      }
      if (vm.formData.cbcmfjid) {
        let url = await vm.getUrl(vm.formData.cbcmfjid)
        vm.formData.cbcmfjurl = url;
      }
      //其他最多三个:  qtfjid: null, qtfjid: 'id1,id2,id3'
      if (vm.formData.qtfjid) {
        let qtfjidArr = vm.formData.qtfjid.split(',');
        if (qtfjidArr && qtfjidArr.length > 0) {
          let aUrlArr = [];
          for (const fjid of qtfjidArr) {
            if (fjid) {
              let url = await vm.getUrl(fjid)
              aUrlArr.push(url);
            }
          }
          if (aUrlArr.length > 0) {
            vm.formData.qtfjurl = aUrlArr.join(',');
          } else {
            vm.formData.qtfjurl = null;
          }
          console.error(vm.formData.qtfjurl, 'qtfjurl-----')
        }
      }
    },


    handlePictureCardPreview(file) {
      this.previewImgUrl = file.url
      this.maskVisibleForPreviewImg = true
    },

    handlePreview(file) {
      console.log(file);
    },
    //船籍港变化时 传值
    getSelectedOptions(val, fieldName) {
      // console.error(val,fieldName,'船籍港选择的值')
      // console.error(this.cjgOptions)
      //传入后台 ,逗号分割的字符串
      this.formData.cjgid = val.join(',')
    },
    getSelectedOptionsFzjg(val, fieldName) {
      // console.error(val)
      // console.error(fieldName)
      this.formData.fzjg = val.join(',')
    },
    getSelectedOptionsZcd(val, fieldName) {
      // console.error(val)
      this.formData.zcd = val.join(',')
    },

    async getCtclOptions() {
      this.ctclOptions = await this.initDictOptionsUtil('hullMaterial')
      console.error(this.ctclOptions, 'ctclOptions')
    },
    async getCblxOptions() {
      this.cblxOptions = await this.initDictOptionsUtil('shipType')
    },

    //根据value 返回 地区名用于: 船籍港, 发证机构, 注册地
    getLabelFromOptionValue(optionType, searchValue) {
      if (true) return;
      let vArr = searchValue.split(',');
      searchValue = vArr[vArr.length - 1];

      let loopOptions;
      if (optionType == 'cjg') {
        loopOptions = this.cjgOptions;
      } else if (optionType == 'fzjg') {
        loopOptions = this.fzjgOptions;
      } else if (optionType == 'zcd') {
        loopOptions = this.zcdOptions;
      }
      return this.doRecursion(loopOptions, searchValue);
    },

    //递归 2023-4-17 修复bug
    doRecursion(loopOptions, searchValue) {
      let ret = '';
      for (const pitem of loopOptions) {
        if (pitem.value == searchValue) {
          ret = pitem.label;
          break;
        } else if (pitem.children && pitem.children.length > 0) {
          ret = this.doRecursion(pitem.children, searchValue)
          if (ret) break;
        }
      }
      return ret;
    },

    async getCjgList() {
      //树形结构  locationData
      let ret = await treeByTemplate({
        templateId: dictionary.locationData.templateId,
        dictDataField: dictionary.locationData.dictDataField
      })
      console.error(this.cjgOptions, 'cjg, fzjg, zcd')
      this.cjgOptions = ret.data;
      // this.cjgOptions.map((v)=>{
      //   console.error( v.value,' this.cjgOptions----')
      //
      // })
      console.error(this.cjgOptions, ' this.cjgOptions----')

      this.fzjgOptions = [...this.cjgOptions]
      this.zcdOptions = [...this.cjgOptions]


      // console.error('----get by listByTemplateId')
      //返回的不是属性结构了
      // let ret = await listByTemplateId({
      //   templateId: dictionary.locationData.templateId,
      //   dictDataField:dictionary.locationData.dictDataField
      // });
      // console.error(ret)

    },

    handleClosedlg(done) {
      done();
      this.$emit('update:visible', false)

      // this.$confirm('确认关闭?')
      //   .then(_ => {
      //     done();
      //     this.$emit('update:visible', false)
      //   })
      //   .catch(_ => {
      //   });
    },

    closeDlg() {
      this.$emit('update:visible', false)
    },

    /*
* 上传图片返回
* fjid: "3283911329302016"   //3283913364571648
  fjmc: "11111111111111_37b4da53-00c8-4c85-bd8a-3769bb509919.png"
  fjyw: "CBFH"
  scmc: "11111111111111.png"
  url: "http://1.13.171.55:9990/fileclient1/11111111111111_37b4da53-00c8-4c85-bd8a-3769bb509919.png"
* */
    async getUrl(fileId) {
      // let r = await getUrlByFileId('3283913364571648,3283911329302016')
      let r = await getUrlByFileId(fileId)
      console.log(r)
      if (r.code == 200) {
        return r.data[0]
      }
      return ''
    },
  }
}
</script>

<style scoped>
.ship-register-detail-dlg {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ship-register-detail-dlg >>> .el-dialog {
  width: 1400px !important;
  margin-top: 0 !important;
  box-sizing: border-box;

}

.ship-register-detail-dlg >>> .el-dialog__header {
  /*padding-bottom: 6px !important;*/
}

.ship-register-detail-dlg >>> .el-dialog__header > .el-dialog__title {
  font-size: 20px;
}

.ship-register-detail-dlg >>> .el-dialog__body {
  padding: 10px 20px 2px !important;
  max-height: 800px;
  overflow-y: auto;
}

.ship-register-detail-dlg >>> .el-dialog__close {
  /*font-size: 26px !important;*/
  transform-origin: bottom !important;
  transform: scale(1.5) !important;
}

.ship-register-detail-dlg >>> .el-dialog__footer {
  padding-top: 0px !important;
  padding-right: 30px !important;
  padding-bottom: 10px !important;
}

.ship-register-detail-dlg >>> .el-dialog__header {
  /*padding: 10px 30px;*/
  padding-left: 30px;
  padding-right: 30px;
}

.ship-info-title {
  background-color: #f5faff;
  font-size: 22px;
  color: black;
  font-family: 'Microsoft YaHei';
  font-weight: bolder;
  padding: 4px 1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-table, .table-history-info, .current-navi-order-info, .payment-info-tb, .ship-list-table {
  border-collapse: collapse;
  width: 100%;
  /*font-size: 18px;*/
  margin-bottom: 10px;
}

.payment-info-tb thead th, .payment-info-tb tbody td, .ship-list-table th, .ship-list-table td {
  padding: 7px;
  border: 1px solid #f0f0f0;
  color: #333333;
  text-align: center;
}

.payment-info-tb thead tr,
.table-history-info thead tr, .current-navi-order-info thead tr, .ship-list-table thead tr {
  background-color: #f7f7f7;
}

.current-navi-order-info th, .current-navi-order-info td {
  padding: 8px;
}

.table-history-info thead tr th, .table-history-info tbody tr td, .ship-list-table thead tr th, .ship-list-table tbody tr td {
  padding: 8px 0px;
}

.table-history-info td, .table-history-info th, .current-navi-order-info th, .current-navi-order-info td {
  border: 1px solid #f0f0f0;
  color: black;
  text-align: center;
}

.current-navi-order-info {
}


.detail-table td {
  border: 1px solid #EBEEF5;
  padding: 0px;
  color: black;
}

/*tr:last-child > td:last-child{*/
/*  text-align: center;*/
/*}*/


.span-label {
  display: inline-block;
  /*width: 32%;*/
  width: var(--my-width1);
  text-align: right;
  /*background-color: red;*/
  padding: 6px 8px 6px 0px;
}

.span-label.w167 {
  width: 16.7%;
}

.w833 {
  width: 83.3%;
}

.span-label.span-w50,
.span-value.span-w50 {
  width: 50%;
}


.span-value {
  display: flex;
  /*width: 68%;*/
  align-items: center;
  width: var(--my-width2);
  height: 100%;
  padding: 2px 2px 2px 6px;
  background-color: #fff;;
}

.span-value-input {
  width: 100%;
  /*height: 100%;*/
  /*border: 1px solid #dfdfdf;*/
  outline: none;
  /*padding: 3px;*/
  font-size: 12px;
}

.td-item-wrap {
  width: 100%;
  /* add 2023-3-28*/
  /*height: 40px;*/
  height: 30px;

  display: flex;
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
}

.td-item-wrap-pics-area {
  width: 100%;
  /* add 2023-3-28*/
  /*height: 30px;*/

  display: flex;
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
}

.span-value select {
  width: 100%;
  border: 1px solid #dfdfdf;
  outline: none;
  padding: 2px;
}

.el-date-picker {
  border-radius: 22px;
}

/*.span-value  */
.my-date-picker >>> .el-input__inner {
  /*border-radius: 1px !important;*/
}

/*   pic upload*/
.pics-upload-area {
  box-sizing: border-box;
  /*border: 1px solid red;*/
  /* test del*/
  /*height: 100px; !*150px;*!*/
  display: flex;
  background-color: #f7f7f7;
  padding: 1px;
  /*margin-bottom: 0px;*/
  align-items: center;
}

.pics-area {
  background-color: white;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 4px 16px;
}

.pics-area .img-item {
  width: 88px;
  /*del  test*/
  /*height: 100%;*/

  /*box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);*/
  /*background-color: rgba(0,0,0,0.02);*/
  position: relative;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /*border-radius: 6px;*/
  overflow: hidden;
  /*: 0px 0px 4px 0px;*/
  padding: 0px 0px 0px 0px;
}

.img-item .el-image {
  /*border-radius: 6px;*/
  background-color: rgba(0, 0, 0, .05);
  width: 100%;
  height: 54px
}

.img-item >>> .el-image > img {
  transition: all 0.5s;
  /*border-radius: 6px;*/
  background-color: rgba(0, 0, 0, .05);
  width: 100%;
  height: 100%

}

.img-wrap:hover .img-mask {
  opacity: 1;
}

.img-wrap {
  width: 100%;
  position: relative;
  /*border-radius: 6px;*/
  overflow: hidden;
}

.img-wrap .img-mask {
  position: absolute;
  /*border-radius: 6px;*/
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all .3s;
  opacity: 0;

}

.img-item .el-image .imageslot {
  background-color: #f5f7fa;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-item .upload-demo:hover {
  border-color: #409EFF;
}

.img-item .upload-demo {
  transition: all 0.5s;
  width: 100%;
  height: calc(100% - 25px);
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c0ccda;
}


.pics-area .img-item .img-text {
  text-align: center;
  padding-top: 4px;
  /*padding: 4px;*/
  /*background-color: #f1f1f1;*/
}

.pics-area .img-item:hover .img-close-btn {
  /*display: flex;*/
  opacity: 1;
}

.pics-area .img-item .img-close-btn {
  opacity: 0;
  transition: all 0.9s;
  position: absolute;
  right: 1px;
  top: 4px;
  width: 34px;
  height: 34px;
  background-color: rgba(255, 255, 255, .6);
  cursor: pointer;
  /*border-radius: 50%;*/
  border-radius: 0px 0px 0px 40px;
  /*for padding left bottom for 不规则border-radius */
  padding-left: 6px;
  padding-bottom: 4px;


  /*border: 1px solid white;*/
  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(0, 0, 0, 0.7);
  font-weight: lighter;
  font-size: 32px;
  line-height: 34px;

}

/*  其他图片 添加按钮 */
.add-btn-area {
  /*background-color: red;*/
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 148px;
  height: 100%;
  /*border-radius: 16px;*/

}

.my-el-form .el-form-item {
  margin-bottom: 0 !important;
}

.other-info-table >>> .el-form-item--feedback {
  width: 100%;
}

.zjhm-width >>> .el-form-item--feedback {
  width: 100%;
}


/* 图片放大预览区 */
.img-preview-my-mask {
  z-index: 8888;
  /* absolute */
  position: fixed;
  /*width: 100vw;*/
  /*height: 100vh;*/
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  box-sizing: border-box;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-preview-wrap {
  /*width: 1400px;*/
  /*height: 800px;*/
  background-color: white;
  border-radius: 4px;
}

.img-preview-wrap .preview-title {
  font-weight: 900;
  padding: 0 20px 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img-preview-wrap .img-preview-div {
  height: 800px;
  /*background-color: red;*/
  border-radius: 0px;
  padding: 10px 20px;
  box-sizing: border-box;

}

.img-preview-wrap .img-preview-div .img-preview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  /*background-color: rgba(0,0,0,0.9)*/
}

.cat-title {
  color: #2daefb;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  /*margin: 8px 0px 20px;*/
}

.link-style-detail {
  color: #d9001b;
  text-decoration: underline;
  cursor: pointer;
}


</style>
